<template>
  <div class="courseplay">
    <el-row :gutter="20">
      <!-- 左侧 -->
      <el-col :span="4">
        <Panel style="padding: 0 10px;min-height: 300px; ">
          <div @click="changeTab(0)" :class="activeTab === 0 ? 'tabs-active' : 'botton_tabs'">
            <i class="el-icon-video-camera-solid"></i>
            <p style="font-size: 20px; margin-left: 10px;"> 课程</p>
          </div>
          <div @click="changeTab(1)" :class="activeTab === 1 ? 'tabs-active' : 'botton_tabs'" >
            <i class="el-icon-notebook-1"></i>
            <p style="font-size: 20px; margin-left: 10px;"> 章节目录</p>
          </div>
          <div @click="changeTab(2)" :class="activeTab === 2 ? 'tabs-active' : 'botton_tabs'" >
            <i class="el-icon-notebook-2"></i>
            <p style="font-size: 20px; margin-left: 10px;"> 练习题</p>
          </div>
        </Panel>
      </el-col>
      <!-- 右侧 -->
      <el-col :span="20">
        <Panel style="padding: 0 30px; padding-bottom: 40px;" >
          <div v-show="activeTab === 0">
            <div class="breadcrumb">
              <div style="font-size: 18px; font-weight: 800; margin: 5px 10px;"> 课程 </div>
              <el-cascader
                v-model="cur_section"
                :options="detail"
                :props="{ expandTrigger: 'hover' }"
                @change="changeSection">
              </el-cascader>
            </div>
            <div style="display: flex; flex-direction: row; align-items: center;">
              <i v-if="(pos<0)" class="el-icon-arrow-left" style="cursor: pointer;font-size: 24px;font-weight: 600;" @click="moveLeft"></i>
              <div v-if="(pos>=0)" style="width:40px" ></div>
              <div style="overflow: hidden; position: relative;" ref="dd" >
                <div class="clips" style="left: 0px" ref="cc" >
                  <div v-for="(item, index) in section" :class="activeClip === index ? 'clip-active' : 'clip_item'" @click="changeclip(index)">
                    <div class="clips_item" >
                      <i v-if="item.type === 'video'" class="el-icon-video-camera" style="font-size: 20px;"></i>
                      <i v-if="item.type === 'problem'" class="el-icon-document" style="font-size: 20px;"></i>
                      <div style="margin-left: 10px;display: inline-block; white-space: nowrap;">{{item.title}}</div>
                    </div>
                  </div>
                </div>
              </div>
              <i v-if="(pos>-totWidth)" class="el-icon-arrow-right" style="cursor: pointer;font-size: 24px;font-weight: 600;" @click="moveRight"></i>
            </div>

            <div v-show="section != null && section[activeClip].type === 'video'">
              <video id="video-cantainer" width="1000" playsinline webkit-playsinline>
              </video>
            </div>


            <div v-if="section != null && section[activeClip].type === 'problem'">
              <CourseProblem :problemID="section[activeClip].title" :key="activeClip">
              </CourseProblem>
            </div>
          </div>
          <div v-show="activeTab === 1" >
            <el-collapse>
              <div v-for="(chapter, index) in course.chapter_set" :key="index">
                <el-collapse-item >
                  <template slot="title">
                    第 {{index+1}} 章 {{chapter.name}}
                    <el-button v-if="!chapter.ok" @click="buyOne(chapter.id)"  class="chapter_buy"  >
                      购买单章
                    </el-button>
                    <el-button v-if="chapter.ok" @click="goPlay(index)"  class="chapter_learn"  >
                      观看课程
                    </el-button>
                  </template>
                  <div v-for="(section, index2) in chapter.section_set" :key="index2" class="section_item">
                    第 {{index2+1}} 节 {{section.name}}
                  </div>
                </el-collapse-item>
              </div>
            </el-collapse>
          </div>

          <div v-if="(activeTab === 2)" >
            <div style="font-size: 20px; font-weight: 800; margin-bottom: 20px;">章节练习题</div>
            <el-collapse>
              <div v-for="(chapter, index) in course.chapter_set" :key="index">
                <el-collapse-item >
                  <template slot="title">
                    第 {{index+1}} 章 {{chapter.name}}
                  </template>
                  <div v-for="(problem, index2) in chapter.problems" :key="index2" class="problem_item" @click="goProblem(problem.title)">
                    
                    <div v-if="problem.my_status === null || problem.my_status === undefined">
                      <div style="width:30px"></div>
                    </div>
                    <div v-else>
                      <Icon :type="problem.my_status === 0 ? 'checkmark-round' : 'minus-round'" style="margin-right: 20px;" :class="problem.my_status === 0 ? 'problem_good' : 'problem_bad'"></Icon>
                    </div>
                    <div style="color: #6d9fcb;" >{{problem.title}}</div>
                  </div>
                </el-collapse-item>
              </div>
            </el-collapse>
          </div>
        </Panel>
      </el-col>
    </el-row>
  </div>
</template>
  
<script>
import api from '@oj/api'
import CourseProblem from './CourseProblem.vue'
import { mapGetters } from 'vuex'
import { USER_TYPE } from '@/utils/constants'

export default {
  name: 'CourseDetail',
  components: {
    CourseProblem
  },
  data () {
    return {
      category: 0,
      course: [],
      query: {},
      preorder: {},
      activeTab: 0,
      cur_section: [0, 0],
      detail: [],
      section: null,
      activeClip: -1,
      loadData: false,
      pos: 0,
      totWidth: 0,
      TCPlayer: null,
      vkey: 'contindf',
      options: {
        fileID: '',
        appID: '1306498106',
        psign: '',
        plugins: {
          ProgressMarker: true,
          ContextMenu: {
            levelSwitch: {
              open: true,
              switchingText: '开始切换清晰度 ',
              switchedText: '切换成功',
              switchErrorText: '切换失败'
            }
          },
          ContinuePlay: { // 开启续播功能
            auto: true,
            text: '上次播放至 ',
            btnText: '恢复播放'
          },
          DynamicWatermark: {
            speed: 0.2,
            content: ''
          }
        },
        autoplay: false,
        language: 'zh-CN'
      }
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.query.course_id = this.$route.query.course_id
      this.getCourseDetail()
    },
    getCourseDetail () {
      api['getCourseDetail'](this.query.course_id).then((res) => {
        this.course = res.data.data
        this.course.chapter_set.forEach((chapter, i) => {
          var tmpChapter = {
            value: i,
            label: '第 ' + (i + 1).toString() + ' 章  ' + chapter.name,
            children: []
          }
          chapter.section_set.forEach((section, j) => {
            tmpChapter.children.push({
              value: j,
              label: '第 ' + (j + 1).toString() + ' 节  ' + section.name
            })
          })
          this.detail.push(tmpChapter)
        })
        this.changeSection(this.cur_section)
        console.log(this.detail)
      }).catch()
    },
    goPlay (cid) {
      this.activeTab = 0
      this.cur_section = [cid, 0]
    },
    buyOne (chapter) {
      this.preorder = {
        goodsId: chapter,
        type: 'One'
      }
      const {href} = this.$router.resolve({
        name: 'preorder',
        query: this.preorder,
        params: this.course
      })
      window.open(href, '_blank')
      // this.$router.push({name: 'preorder', query: this.preorder, params: this.course})
    },
    changeTab (id) {
      if (id === this.activeTab) {
        return
      }
      if (this.activeTab === 0 && this.TCPlayer !== null) {
        this.TCPlayer.pause()
      }
      if (id === 0) {
        this.changeSection(this.cur_section)
      }
      this.activeTab = id
    },
    changeSection (value) {
      console.log(value)
      var cid = value[0]
      console.log(cid)
      console.log(this.course.chapter_set[cid].ok)
      if (this.course.chapter_set[cid].ok === false) {
        this.$message({
          message: '对不起，请购买该章节的课程',
          type: 'warning'
        })
        return
      }
      var sid = value[1]
      this.section = []
      let lt = this.course.chapter_set[cid].section_set[sid].detail
      lt.forEach(clip => {
        this.section.push({
          type: 'video',
          title: clip.title,
          video_url: clip.video_url
        })
        clip.problems.forEach(problem => {
          this.section.push({
            type: 'problem',
            title: problem._id
          })
        })
      })
      this.loadData = true
      this.changeclip(0)
      this.pos = 0
      this.$refs.cc.style.left = this.pos.toString() + 'px'
      this.totWidth = this.$refs.dd.clientWidth
    },
    moveLeft () {
      this.pos += 200
      this.$refs.cc.style.left = this.pos.toString() + 'px'
    },
    moveRight () {
      this.pos -= 200
      this.$refs.cc.style.left = this.pos.toString() + 'px'
    },
    changeclip (index) {
      if (this.activeClip !== -1 && this.section[this.activeClip].type === 'video') {
        if (this.TCPlayer === null) {
          this.TCPlayer = window.TCPlayer('video-cantainer', this.options)
        } else {
          this.TCPlayer.pause()
        }
      }
      this.activeClip = index
      if (this.section[index].type === 'video') {
        this.changeVideo(index)
      }
    },
    changeVideo (index) {
      let videoUrl = this.section[index].video_url
      api['getSign'](videoUrl).then((res) => {
        if (res.data.data.ok === false) {
          this.$message({
            message: '对不起，请购买该章节的课程',
            type: 'warning'
          })
          return
        }
        this.options.fileID = res.data.data.fileID
        this.options.psign = res.data.data.psign
        this.options.plugins.DynamicWatermark.content = this.user.id.toString()
        if (this.TCPlayer === null) {
          this.TCPlayer = window.TCPlayer('video-cantainer', this.options)
        } else {
          this.TCPlayer.loadVideoByID(this.options)
        }
      }).catch()
      console.log('qqqqq', this.options)
    },
    goProblem (id) {
      var pos = id.indexOf('.')
      console.log(pos)
      const {href} = this.$router.resolve({
        name: 'problem-details',
        params: {problemID: id.substr(0, pos)}
      })
      window.open(href, '_blank')
      // this.$router.push({name: 'problem-details', params: {problemID: id}})
    }
  },
  computed: {
    ...mapGetters(['user', 'theme']),
    isAdmin () {
      return this.user.admin_type === USER_TYPE.SUPER_ADMIN
    }
  },
  beforeDestroy () {
    if (this.TCPlayer !== null) {
      this.TCPlayer.dispose()
    }
    this.TCPlayer = null
  }
}
</script>

<style lang="less">

  .courseplay {
    position: relative;
    left: -15%;
    width: 95vw;
  }
  .botton_tabs {
    font-size: 28px;
    display: flex;
    flex-direction: row;
    justify-content:flex-start;
    margin-bottom: 10px;
    align-items: center;
    padding: 5px 20px ;
    cursor: pointer;
  }
  
  .tabs-active {
    font-size: 28px;
    display: flex;
    flex-direction: row;
    justify-content:flex-start;
    margin-bottom: 10px;
    align-items: center;
    padding: 5px 20px ;
    background-color: #e9fbf5;
    border-radius: 15px;
    cursor: pointer;
  }

  .course_item {
    width: 270px;
    float: left;
    background: #fff;
    margin-bottom: 24px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid #d7d7d7;
    position: relative;
    margin-right: 5px;
  }

  .covoer_image {
    width: 100%;
  }

  .introduce_image {
    height: 100%;
    width: 100%;
  }

  .course_title {
    font-weight: 600;
    font-size: 30px;
  }

  .section_item {
    padding: 8px;
    font-size: 14px;
    margin: 5px;
    border: 1px solid #d7d7d7;
    border-radius: 3px;
    background-color: #f2f2f2;
  }

  .problem_item {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 18px;
    margin-left: 10px;
    padding-left: 10px;
    // border-radius: 3px;
    border-bottom: 1px solid rgb(195, 191, 191);
    cursor: pointer;
  }

  .el-collapse-item__header{
    font-size: 16px;
    font-weight: 600;
  }

  .chapter_bn {
    position: absolute;
    right: 70px;
    padding: 8px;
    font-size: 10px;
    font-weight: 600;
  }

  
  .chapter_buy {
    position: absolute;
    right: 80px;
    padding: 8px;
    font-size: 10px;
    font-weight: 600;
    background-color:rgb(71, 120, 255);
    color: white;
  }

  .chapter_learn {
    position: absolute;
    right: 80px;
    padding: 8px;
    font-size: 10px;
    font-weight: 600;
    background-color:rgb(68, 222, 101);
    color: white;
  }

  .breadcrumb{
    display: flex;
    flex-direction: row;
    align-items: center;

  }
  
  .el-cascader .el-input .el-input__inner {
    width: 600px;
    font-size: 16px;
  } 

  .clip_item {
    background-color: #f5f5f5;
    border-radius: 12px;
    color: darkgray;
    cursor: pointer;
    margin-right: 10px;
    padding: 7px 20px;
    font-size: 16px;
    font-weight: 400;
    flex-flow: row nowrap;
    :hover{
      color: rgb(12, 233, 111);
    }
  }

  .clip-active {
    background-color: #67e378;
    border-radius: 12px;
    color: rgb(69, 104, 71);
    cursor: pointer;
    margin-right: 10px;
    padding: 7px 20px;
    font-size: 16px;
    font-weight: 400;
    flex-flow: row nowrap;
  }

  .clips {
    display: flex;
    overflow-y: hidden;
    overflow-x: scroll;
    margin: 10px 0;
    position: relative;
    left: 0;
    width: 100vw;
    transition-duration: 0.7s, 0.7s;
  }

  .clips_item{
    width: 100%;
    display: flex;
    align-items: center;
    height: 20px;
  }

  .problem_good {
    color: #19be6b;
  }
  .problem_bad {
    color: #ed3f14;
  }
</style>
  